<template>
	<view class="report-container">
		<view style="font-size: 34rpx; color: #020202; margin-top: 46rpx;">
			请选择要办理的类型
		</view>
		<view class="report-button-group">
			<view @click="toSafeTips" class="report-button">
				<view class="button-desc">
					<view class="zh-text">
						安全生产告知书
					</view>
					<view class="en-text">
						NOTICE
					</view>
				</view>
				<image :src="reportImage"></image>
			</view>
			<view @click="toSafeCheck" class="report-button">
				<view class="button-desc">
					<view class="zh-text">
						安全生产检查表
					</view>
					<view class="en-text">
						SITEINSPECTION
					</view>
				</view>
				<image :src="wodejubaoImage"></image>
			</view>
		</view>

		<view class="footer-fixed">
			<van-button type="info" round block color="#7C96F3" @click="toLogout">
				退出登录
			</van-button>
		</view>
	</view>
</template>

<script>
	import reportImage from 'static/report/tousujubao.png'
	import wodejubaoImage from 'static/report/wodejubao.png'
	export default {
		data() {
			return {
				reportImage,
				wodejubaoImage
			}
		},
		methods: {
			toSafeTips() {
				uni.navigateTo({
					url: '../safe_tips_list/safe_tips_list'
				})
			},

			toSafeCheck() {
				uni.navigateTo({
					url: '../safe_check_list/safe_check_list'
				})
			},

			toLogout() {
				uni.removeStorage({
					key: 'userInfo',
					success: () => {
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.report-container {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.report-button-group {
			margin-top: 49rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.report-button {
				width: 723rpx;
				height: 234rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.button-desc {
					position: absolute;
					top: 56rpx;
					left: 231rpx;
					text-align: left;

					.zh-text {
						font-size: 36rpx;
						font-weight: 500;
						line-height: 54rpx;
						color: #FFFFFF;
					}

					.en-text {
						font-size: 25rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}

		.footer-fixed {
			position: fixed;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 26rpx 38rpx;
			background-color: white;
		}
	}
</style>
